<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="text.css" />
    <style>
      /* #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      } */
    </style>
    <script>
      window.onload = function () {
        // 点击按钮，读取该元素的样式
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          // alert(box1.style.width);

          /**
           * 获取元素的当前显示的样式
           * 语法：元素.currentStyle.样式名
           * 它可以读取当前元素正在显示的样式
           *
           * 只有ie浏览器支持
           */

          /**
           * 在其他浏览器可以使用
           *  getComputedStyle()
           * 需要两个参数
           * 1.获取样式元素
           * 2.可以传递一个伪元素,一般都是null
           *
           * 该方法会返回一个对象，对象中封装了当前元素对应的样式
           * 可以通过对象.样式名来读取样式
           * 如果获取样式没有设置，则会获取到真实的值，而不是默认值
           */
          //   var obj = getComputedStyle(box1, null);
          //   alert(getComputedStyle(box1, null).width);
          alert(getStyle(box1, "width"));
        };
      };
      /**定义一个函数，用来获取指定元素当前的样式
       * 参数：
       * 1.obj 要获取样式的元素
       * 2.name 要获取的样式名
       *
       */
      function getStyle(obj, name) {
        if (window.getComputedStyle) {
          return getComputedStyle(obj, null)[name];
        }
      }
    </script>
  </head>
  <body>
    <button id="btn01">点击</button>
    <br /><br />
    <div id="box1" style="width: 220px"></div>
  </body>
</html>
